import React, { useState } from 'react'
import { Table } from 'antd';
import { Switch } from 'antd';
import './style/list.css'
import { Input } from 'antd';
import { Modal } from 'antd';
import { PlusCircleOutlined, RedoOutlined, MinusCircleOutlined, AimOutlined } from '@ant-design/icons'

export default function List() {
    const columns = [
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            render: (text, record) => (
                <a onClick={(e) => del(record.id)}>{text}</a>
            ),
        },
        {
            title: '编码',
            dataIndex: 'code',
            key: 'code',
        },
        {
            title: '地址',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '是否默认',
            dataIndex: 'ischeck',
            key: 'ischeck',
            render: (text, record) => (
                <Switch
                    checked={text}
                // onChange={checked => onSwitchChange(record.key, checked)}
                />
            ),
        },
        {
            title: '是否锁定',
            dataIndex: 'issuo',
            key: 'issuo',
            render: (text, record) => (
                <Switch
                    checked={text}
                // onChange={checked => onSwitchChange(record.key, checked)}
                />
            ),
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            render: (text, record) => (
                <Switch
                    checked={text}
                // onChange={checked => onSwitchChange(record.key, checked)}
                />
            ),
        },
    ];
    
    // const bumens = [
    //     { "id": "001", "name": "财务部" },
    //     { "id": "002", "name": "人力资源部" },
    //     { "id": "003", "name": "市场部" },
    //     { "id": "004", "name": "研发部" },
    //     { "id": "005", "name": "销售部" },
    //     { "id": "006", "name": "客户服务部" },
    //     { "id": "007", "name": "信息技术部" },
    //     { "id": "008", "name": "产品管理部" },
    //     { "id": "009", "name": "法务部" },
    //     { "id": "010", "name": "供应链管理部" }
    // ]
    const [data, setData] = useState([
        {
            "id": "1",
            "name": "第一部门",
            "code": "001",
            "address": "地址1",
            "ischeck": true,
            "issuo": false,
            "status": true
        },
        {
            "id": "2",
            "name": "第二部门",
            "code": "002",
            "address": "地址2",
            "ischeck": false,
            "issuo": false,
            "status": true
        },
        {
            "id": "3",
            "name": "第三部门",
            "code": "003",
            "address": "地址3",
            "ischeck": true,
            "issuo": true,
            "status": false
        },
        {
            "id": "4",
            "name": "第四部门",
            "code": "004",
            "address": "地址4",
            "ischeck": false,
            "issuo": false,
            "status": true
        },
        {
            "id": "5",
            "name": "第五部门",
            "code": "005",
            "address": "地址5",
            "ischeck": false,
            "issuo": true,
            "status": false
        }
    ]);
    const del = (e)=>{
        console.log(e);
        const index = data.findIndex(item => item.id === e);
        if (index !== -1) {
            const newData = [...data];
            newData.splice(index, 1);
            setData(newData);
        }
    }
    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
    };
    const [obj, setObj] = useState({
        id: data.length+1,
        name: '',
        address: '',
        code: '',
        ischeck: false,
        issuo: false,
        status: true,
    })
    const handleOk = () => {
        setIsModalOpen(false);
        setData(a=>[...a, {...obj}])
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const changcheck = (value) =>{
        // console.log(value);
        setObj(prev => ({ ...prev, ischeck: value }));
    }
    const changissuo = (value) => {
        setObj((a)=>({...a, issuo:value}))
    }
    return (
        <div style={{ lineHeight: "30px" }}>
            <button onClick={showModal}><PlusCircleOutlined />增加</button>
            <button><RedoOutlined />修改</button>
            <button><MinusCircleOutlined />删除</button>
            <button><AimOutlined />查找</button>
            <Table columns={columns} dataSource={data} pagination={{
                pageSize: 5
            }}/>
            <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <Input placeholder="名称" value={obj.name} onChange={(e)=>{
                    setObj(a=>({...a, name: e.target.value}))
                }}/>
                <Input placeholder="编码" value={obj.code} onChange={(e)=>{
                    setObj(a=>({...a, code: e.target.value}))
                }}/>
                <Input placeholder="地址" value={obj.address} onChange={(e)=>{
                    setObj(a=>({...a, address: e.target.value}))
                }}/>
                是否默认：<Switch defaultChecked checked={obj.ischeck} onChange={(e)=>{changcheck(e)}} />
                是否锁定：<Switch defaultChecked checked={obj.issuo}  onChange={(e)=>{changissuo(e)}}/>
            </Modal>
        </div>
    )
}
